<template>
    <div class="search-cont">
            <img src="@/assets/lajichacha.png" alt="" class="cc-img">
            <div class="search">
                <input type="text" placeholder="这是什么垃圾">
                <span @click="routerLink(`search`)"><img src="@/assets/btn_search.png" alt="" class="search-btn"></span>
            </div>
        </div>
</template>
<script>
export default {
    methods:{
         routerLink(href){
         this.$router.push({
             name:href
         })
        }
 }
}
</script>
<style lang="less" scoped>
    .search-cont{
        display: flex;
        justify-content: space-between;
        align-items: center;
        white-space: nowrap;
        .search{
            border: 2px solid #4076FB;
            border-radius: 20px;
            padding-left: 10px;
            box-sizing: border-box;
            position: relative;
        }
            }
        .cc-img{
            width: 26%;
            }
        .search-btn {
            width: 9%;
            vertical-align: middle;
            position: absolute;
            right: 10px;
            top: 3vw;
        }
        input{
            height: 30px;
            line-height: 30px;
            border: none;
            font-size: 17px;
            outline: none;
            background: none;
                img{
                width:40%;
            }
        }
</style>